<template>
	<view class="kaipiaoxinxi">
		<view style="height: 20rpx;"></view>
		<view class="shenqingfapiao-main">
			<view class="shenqingfapiao-box">
				<view class="shenqingfapiao-top">
					<text class="shenqingfapiao-top_left">开票信息列表</text>
					<view class="shenqingfapiao-top_right" style="padding: 0 20rpx;" @click="addKpxx">新增开票信息</view>
				</view>
				<view class="shenqingfapiao-kpxx" v-if="list.length > 0">
					<view class="kpxx-list" :class="{'active' : isChange == index }" v-for="(item,index) in list"
						:key="index" @click="choose(item,index)">
						<view class="kpxx-list-cell">
							<text class="kpxx-cell-left" style="color: #2F7FFF;">{{item.taitou}}</text>
							<view class="kpxx-cell-right">
								<view :class="[item.ismoren?'fpxx-foot-bd  fpxx-foot-bd_active':'fpxx-foot-bd']"
									@click="setMoren(item.id,item.ismoren)">
									<text class="default-icon"></text>设为默认
								</view>
							</view>
						</view>
						<view class="kpxx-list-cell">
							<text class="kpxx-cell-left">税号：</text>
							<text class="kpxx-cell-right">{{item.shuihao == '' ? '--' : item.shuihao}}</text>
						</view>
						<view class="kpxx-list-cell">
							<text class="kpxx-cell-left">邮箱：</text>
							<text class="kpxx-cell-right">{{item.email}}</text>
						</view>
						<view class="kpxx-list-cell">
							<text class="kpxx-cell-left">类型：</text>
							<text class="kpxx-cell-right">{{item.taitoulx == 1 ? '个人' : '单位'}}</text>
						</view>
					</view>

				</view>
				<view class="wodefapiao-null" v-else>
					<image src="@/static/img/wodefapiao/fapiao-null.png" class="wodefapiao-null-img"></image>
					<view class="wodefapiao-null-text">没有相关的开票信息，请<text style="color: #2F7FFF;"
							@click="addKpxx">新增开票信息</text></view>
				</view>

			</view>
		</view>
		<view class="shenqingfapiao-foot" v-if="list.length">
			<view class="shenqingfapiao-foot-left">
				<view class="bianjikaipiao" @click="openEditPop">编辑开票信息</view>
			</view>
			<view class="shenqingfapiao-foot-right" @click="backPage">选择并返回</view>
		</view>
		<!-- 编辑开票信息 -->
		<u-popup :show="isshowEditPopup" mode="center" :round="5">
			<view class="shuomingPop">
				<view class="guanbi-icon" @click="closeEditPopup">×</view>
				<view class="shuomingPop-title">编辑开票信息</view>
				<view class="bjkpxx-box">
					<view class="bjkpxx-cell">
						<view class="bjkpxx-cell-left">抬头类型：</view>
						<view class="bjkpxx-cell-right">
							<text class="bjkpxx-ttlx" :class="taitoulx == 1 ? 'active' : ''"
								@click="clicktaitoulx(1)">个人</text>
							<text class="bjkpxx-ttlx" :class="taitoulx == 2 ? 'active' : ''"
								@click="clicktaitoulx(2)">单位</text>
						</view>
					</view>
					<view class="bjkpxx-cell">
						<view class="bjkpxx-cell-left">发票抬头：</view>
						<view class="bjkpxx-cell-right">
							<view class="kpxx-cell-border">
								<u--input border='none' v-model="taitou" placeholder="请填写发票抬头"></u--input>
							</view>
						</view>
					</view>
					<view class="bjkpxx-cell" v-show="taitoulx == 2">
						<view class="bjkpxx-cell-left">税号：</view>
						<view class="bjkpxx-cell-right">
							<view class="kpxx-cell-border">
								<u--input border='none' v-model="shuihao" placeholder="请输入统一社会信用代码"></u--input>
							</view>
						</view>
					</view>
					<view class="bjkpxx-cell">
						<view class="bjkpxx-cell-left">邮箱地址：</view>
						<view class="bjkpxx-cell-right">
							<view class="kpxx-cell-border">
								<u--input border='none' v-model="email" placeholder="发票接收邮箱"></u--input>
							</view>
						</view>
					</view>
				</view>
				<view class="shuomingPop-btn">
					<text class="quren-btn" @click="saveKpxx">确定保存</text>
					<text class="shanchu-btn" v-show="isFromEdit" @click="delePop">删除</text>
				</view>
			</view>
		</u-popup>

		<!-- 确认删除 -->
		<u-modal :show="isDelePop" content='您确认删除当前开票信息？' :showCancelButton='true' @confirm='deleInfo'
			@cancel='closeDelePop' :buttonReverse="true"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ismoren: false,
				list: [],
				taitoulx: 1,
				isshowEditPopup: false,
				taitou: '',
				location: '11042',
				isChange:'-1',
				shuihao:'',
				email:'',
				isFromEdit:false,
				kpxxid:'',
				isDelePop:false,
				addoroupdate:1,
			}
		},
		onLoad(options) {
			if(+options.kpxxid){
				this.kpxxid = +options.kpxxid
			}
			this.getList()
		},

		methods: {
			clicktaitoulx(val) {
				this.taitoulx = val
			},
			closeEditPopup() {
				this.isshowEditPopup = false
			},
			addKpxx() {
				this.isFromEdit = false
				this.taitoulx = 1
				this.taitoulx = 1
				this.shuihao = ''
				this.taitou = ''
				this.email = ''
				this.fpid = ''
				this.addoroupdate = 1
				this.isshowEditPopup = true
			},
			openEditPop() {
				this.isFromEdit = true
				this.addoroupdate = 2
				this.isshowEditPopup = true
			},

			getList() {
				uni.$u.http
					.post('User/fapiao/KaipiaoListHandler.ashx', {
						location: this.location,
					}).then((rs) => {
						this.list = rs.list
						// 如果url中的id且不为0，则选中当前项；否则选中默认，如果没有默认则默认第一项
						if (+this.kpxxid) {
							const currentItem = this.list.filter(item => item.id === this.kpxxid)
							if (currentItem.length) {
								this.isChange = this.list.findIndex(item=>item.id === this.kpxxid)
								this.taitou = currentItem[0].taitou
								this.taitoulx = currentItem[0].taitoulx
								this.shuihao = currentItem[0].shuihao
								this.email = currentItem[0].email
								this.kpxxid = currentItem[0].id
							}
						} else {
							const morenList = this.list.filter(item => item.ismoren)
							if (morenList.length) {
								this.isChange = this.list.findIndex(item => item.moren)
								this.taitou = currentItem[0].taitou
								this.taitoulx = currentItem[0].taitoulx
								this.shuihao = currentItem[0].shuihao
								this.email = currentItem[0].email
								this.kpxxid = currentItem[0].id
							} else {
								this.isChange = 0
								this.taitou = this.list[0].taitou
								this.taitoulx = this.list[0].taitoulx
								this.shuihao = this.list[0].shuihao
								this.email = this.list[0].email
								this.kpxxid = this.list[0].id
							}
						}
					}).catch((err) => {
						// uni.showToast({
						// 	title: err.msg,
						// 	icon: "none",
						// })
						this.list = []
					})
			},
			choose(item, index) {
				// console.log(item)
				// if(index !== this.isChange){
				this.isChange = index

				this.taitoulx = item.taitoulx
				this.taitou = item.taitou
				this.shuihao = item.shuihao
				this.email = item.email
				this.kpxxid = item.id

				// }
				// else{
				// 	this.isChange = -1
				// }

			},
			delePop() {
				this.isshowEditPopup = false
				this.isDelePop = true
			},
			closeDelePop() {
				this.isDelePop = false
			},
			deleInfo() {
				let that = this
				uni.$u.http
					.post('User/fapiao/KaipiaoUpdateHandler.ashx', {
						location: this.location,
						id: this.kpxxid,
						state: 3
					}).then((rs) => {
						uni.showToast({
							title: "删除信息成功!",
							success: function() {
								that.getList()
								that.isDelePop = false
							}
						})

					}).catch((err) => {
						this.list = []
					})
			},
			checkEmail(email) {
				return RegExp(
						/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/)
					.test(
						email);
			},
			saveKpxx() {
				if (this.taitou == "") {
					uni.showToast({
						title: '请填写发票抬头',
						icon: "none"
					});
					return
				}
				if (this.taitoulx == 1 && this.taitou.length > 5) {
					uni.showToast({
						title: '“个人”类别发票抬头不得高于5个字 ！',
						icon: "none"
					});
					return;
				}
				if (this.shuihao == "" && this.taitoulx == 2) {
					uni.showToast({
						title: '请输入统一社会信用代码',
						icon: "none"
					});
					return
				}
				if (this.email == "") {
					uni.showToast({
						title: '请输入发票接收邮箱',
						icon: "none"
					});
					return
				}
				if (!this.checkEmail(this.email)) {
					uni.showToast({
						title: '请输入正确的接收邮箱！',
						icon: "none"
					});
					return;
				}

				uni.$u.http
					.post('user/fapiao/KaipiaoEditHandler.ashx', {
						taitou: this.taitou,
						shuihao: this.shuihao,
						email: this.email,
						taitoulx: this.taitoulx,
						isaddorupdate: this.addoroupdate,
						id: this.kpxxid,
						location: this.location,
						version: 2
					}).then((rs) => {
						uni.showToast({
							title: '开票信息保存成功！',
							icon: "none"
						});
						this.isshowEditPopup = false
						this.getList()

					}).catch((err) => {
						uni.showToast({
							title: err.msg,
							icon: "none"
						});
					})
			},
			backPage(){
				// + '&fapiaoid=' + this.fapiaoid
				uni.redirectTo({
					url: '/pages/user/wodefapiao/shenqingfapiao?kpxxid=' + this.kpxxid 
				})
			},
			updatestate(type, id) {
				let that = this;
				uni.$u.http
					.post('/User/fapiao/KaipiaoUpdateHandler.ashx', {
						id: id,
						state: type,
					}).then((rs) => {
						uni.showToast({
							title: '默认开票信息修改成功',
							icon: "none",
							success: function() {
								that.getList()
							}
						});

					}).catch((err) => {
						uni.showToast({
							title: err.msg,
							icon: "none"
						});
					})
			},
			//设置默认
			setMoren(id, flag) {
				let that = this;
				if (!flag) {
					uni.showModal({
						title: '提示',
						content: '确定要设置为默认信息吗？',
						success: function(res) {
							if (res.confirm) {
								that.updatestate(1, id);
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},

		}
	}
</script>

<style lang="scss">
	@import "@/static/css/fapiao.scss";

	page {
		background-color: #f4f4f4;
		height: 100%;
	}

	.kaipiaoxinxi {
		height: 100%;
	}

	.shenqingfapiao-main {
		margin: 0 28rpx;
		height: calc(100% - 10px);
	}

	.fpxx-foot-bd {
		display: flex;
		align-items: center;
		font-size: 22rpx;
		color: #333333;

		.default-icon {
			background: url(@/static/img/fpgl/fpgl_09.jpg) no-repeat;
			width: 30rpx;
			height: 30rpx;
			background-size: 100% 100%;
			margin-right: 6rpx;
		}
	}

	.fpxx-foot-bd_active {
		.default-icon {
			background: url(@/static/img/wodefapiao/moren-active.png) no-repeat;
			width: 30rpx;
			height: 30rpx;
			background-size: 100% 100%;
			margin-right: 6rpx;
		}
	}

	.shenqingfapiao-box {
		height: calc(100% - 20rpx);
	}

	.bjkpxx-box {
		margin: 0 28rpx;
	}

	.bjkpxx-cell {
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;

		&-left {
			width: 130rpx;
			font-size: 24rpx;
		}

		&-right {
			flex: 1;

			.bjkpxx-ttlx {
				width: 190rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				background: #FFFFFF;
				border-radius: 4rpx;
				border: 1px solid #2F7FFF;
				font-size: 24rpx;
				color: #2F7FFF;
				display: inline-block;

				&:first-child {
					margin-right: 20rpx;
				}

				&.active {
					background: #2F7FFF;
					color: #FFFFFF;
				}
			}
		}
	}

	.kpxx-cell-border {
		border: 1px solid #dadbde;
		border-radius: 6rpx;
		padding: 14rpx 20rpx;
	}
</style>